<template>
  <div class="main">
    <div class="main-header">

    </div>
    <div class="main-centent">
      <div class="main-centent-left">

        <div class="user-background">

          <img class="user-background-img" :src="Data.userInfo.info_background_image" alt="">

          <div class="user-avatar">

            <img :src="Data.userInfo.avatar" alt="">
     
          </div>

          <p class="user-username">{{ Data.userInfo.username }}</p>

          <span class="user-id">{{ Data.userInfo.id }}</span>

        </div>

      </div>
      <div class="main-centent-right">

        <div class="main-centent-right-header">
          <el-menu size="small" :default-active="Data.activeIndex" class="el-menu-demo" mode="horizontal"
            @select="MenuSelect">
            <el-menu-item v-for="(item, index) in Data.TagsList" :index="item.path" :key="item.path">{{ item.name
              }}</el-menu-item>
          </el-menu>
        </div>

        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </div>

    </div>
  </div>
</template>

<script setup>
import API from "@/api";
import { ref, reactive, onBeforeMount, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";
const VueRoute = useRoute();
const VueRouter = useRouter();
const userInfo = reactive({});
const PageQuery = ref(null)
onBeforeMount(() => {
  let Route = VueRoute
  let Query = Route.query
  PageQuery.value = Query
  let { user } = PageQuery.value
  GetUserBaseInfo(user)
})
function MenuSelect(e) {
  VueRouter.push({
    path: e,
    query: PageQuery.value
  })
}
const Data = reactive({
  // 拉黑用户弹窗
  ToBlackDialog: false,
  userInfo: {},
  activeIndex: "/userManagement/info/base",
  TagsList: [
    { name: "实名认证", key: 1, path: "/userManagement/info/real" },
    { name: "角色设置", key: 2, path: "/userManagement/info/auth" },
    { name: "我的设备", key: 3, path: "/userManagement/info/device" },
    { name: "安全设置", key: 4, path: "/userManagement/info/security" },
    { name: "我的地址", key: 5, path: "/userManagement/info/address" },
    { name: "邀请好友", key: 6, path: "/userManagement/info/inviter" },
    { name: "操作日志", key: 7, path: "/userManagement/info/active" },
  ],
  userOptions: [
    {
      name: "拉黑",
      icon: "icon-renzheng",
      key: 0,
    },
    {
      name: "登出",
      icon: "icon-renzheng",
      key: 1,
    },
    {
      name: "限制",
      icon: "icon-renzheng",
      key: 2,
    },
    {
      name: "转入临时",
      icon: "icon-renzheng",
      key: 3,
    },
    {
      name: "删除",
      icon: "icon-renzheng",
      key: 4,
    },
  ],
});

function GetUserBaseInfo(user) {
  API.Manage.userInfo({ user })
    .then(res => {
      let { data } = res
      Data.userInfo = data
    }).catch(err => {
      console.log("GetUserBaseInfo err");
      console.log(err);
    })
}
// 点击用户操作组
function ClickUserOption(index) {
  switch (index) {
    case 0: // 拉黑
      this.ToBlackUser();
      break;
    case 1: // 登出
      this.LogoutUser();
      break;
    case 2: // 限制
      this.LimitUser();
      break;
  }
}
// 获取基本用户信息
function GetBaseInfo(user) {
  API.Manage.userInfo({ user })
    .then((res) => {
      console.log(res);
      let { data } = res;
      Data.userInfo = data;
    })
    .catch((err) => {
      console.log(err);
    });
}
// 拉黑用户
function ToBlackUser() { }
// 登出
function LogoutUser() { }
// 限制
function LimitUser() { }
// 删除
function RemoveUser() { }
// 点击顶部选项卡
function clickTags(item) {
  let { key, path } = item;
  console.log(item);
}
</script>

<style scoped lang="scss">
.user {

  font-size: 10px;

  &-background {
    height: 140px;
    position: relative;

    &-img {
      width: 100%;
      height: 100%;
    }
  }

  &-id {
    position: absolute;
    left: 50%;
    top: 86px;
    transform: translateX(-50%);
    display: inline-block;
    padding: 1px 8px;
    border: 2px solid #5ea9f9c5;
    border-radius: 10px;
    font-size: 8px;
    line-height: 10px;
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
  }

  &-username {
    position: absolute;
    left: 50%;
    top: 108px;
    transform: translateX(-50%);
    font-size: 10px;
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
  }

  &-avatar {
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0px 0px 3px 8px #c3c3c322;
  }



}

.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;

  &-centent {
    width: 100%;
    display: flex;
    flex: 1;
    gap: 15px;

    &-left,
    &-right {
      border-radius: 10px;
      overflow: hidden;
    }

    &-left {
      min-width: 250px;
      max-width: 250px;
      background: white;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      gap: 10px;
      border-radius: 10px;
      overflow: hidden;

      .base-info {
        display: flex;
      }
    }

    &-right {
      flex: 1;
      background: white;
      overflow: hidden;

      &-header {
        margin-bottom: 10px;
      }
    }
  }
}

.user-tags-list {
  display: flex;
  gap: 6px;
}

.user-tags-list-li {
  padding: 2px 4px;
  background: #5eaaf9;
  border-radius: 10px;
  font-size: 11px;
  color: white;
}
</style>
